<template>
  <view class="app bg-white pb-200rpx">
    <!-- 搜索框 -->
    <view class="search-unit">
      <view class="search-box">
        <view class="mr-15rpx" @click="search()">
          <u-icon size="40" color="#adb6bb" name="search"></u-icon>
        </view>
        <input
          class="search-input"
          type="text"
          confirm-type="search"
          v-model.trim="searchKey"
          :adjust-position="false"
          @confirm="search()"
          cursor-color="#c4cdd1"
          placeholder-class="search-placeholder"
          placeholder="这里有很多宝贝哦~"
        />
      </view>
    </view>

    <!-- 轮播图 -->
    <u-swiper
      :list="carousels"
      :autoplay="true"
      :height="1280"
      :interval="8000"
      v-if="carouselShow"
    ></u-swiper>

    <!-- 导航菜单 -->
    <view class="mt-40rpx" v-if="menuShow">
      <view class="px-25rpx relative">
        <image
          class="w-full"
          src="https://assets.miaodao.qichangsheng.com/9f9c1ae0daf98e301430bbaf45790a10.png"
          mode="widthFix"
        />
        <view class="flex items-center justify-evenly w-690rpx h-220rpx absolute top-22rpx left-30rpx">
          <view
            class="flex flex-col items-center"
            v-for="(area, index) in menulist"
            :key="index"
            @click="goto(area.link)"
          >
            <image class="w-70rpx h-70rpx" mode="aspectFit" :src="area.icon" />
            <text class="mt-20rpx">{{ area.label }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <goods-list ref="goodsRef"></goods-list>

    <!-- 广告 -->
    <u-mask :show="adShow" :mask-click-able="false" @click="adShow = false" blur="3">
      <view class="flex flex-col justify-center items-center h-100%">
        <view>
          <view class="flex justify-end pr-40rpx">
            <u-icon
              name="close"
              custom-prefix="mt-icon"
              size="40"
              color="white"
              @click="adShow = false"
            ></u-icon>
          </view>
          <view @click="gotoAd('/pages/goods/detail?id=1')">
            <!-- <image class="width-350rpx" mode="widthFix" src="/static/quan.png"> </image> -->
          </view>
        </view>
      </view>
    </u-mask>
  </view>
</template>

<script setup lang="ts">
  import GoodsList from './goods.vue';
  import { ref } from 'vue';
  import { report } from '@/utils/exception';
  import { getCarousel } from '@/api/page/carousel';
  import { getHomeConfig } from '@/api/page/config';
  import type { MenuData } from '@/types/menu';

  const carousels = ref<string[]>([]);
  const carouselShow = ref<boolean>(false);
  const menuShow = ref<boolean>(true);
  const adShow = ref<boolean>(false);
  const goodsRef = ref();
  const searchKey = ref<string>('');
  const menulist = ref<MenuData[]>([
    { label: '品牌故事', icon: '/static/icon/img/nav/custom/about.png', link: '/pages/aboutus/index' },
    // { label: '客户案例', icon: '/static/icon/img/nav/praise.png', link: '/pages/praise/index' },
    { label: '品牌视频', icon: '/static/icon/img/nav/custom/video.png', link: '/pages/video/index' },
    // { label: '商学院', icon: '/static/icon/img/nav/custom/college.png', link: '/pages/college/index' },
    { label: '素材中心', icon: '/static/icon/img/nav/custom/material.png', link: '/pages/material/index' },
    { label: '百问百答', icon: '/static/icon/img/nav/custom/dialog.png', link: '/pages/dialog/index' },
    // { label: '每日签到', icon: '/static/icon/img/nav/sign.png', link: '/pages/sign/index' },
    // { label: '积分商城', icon: '/static/icon/img/nav/mall.png', link: '/pages/integral/goods_list' },
  ]);

  getHomeConfig()
    .then((res) => {
      menuShow.value = res.data == '1';
    })
    .catch((err) => {
      report(err);
    });

  getCarousel(0)
    .then((res) => {
      carousels.value = res.data.imgs.split(',');
      carouselShow.value = res.data.imgs != '' && res.data.status == 1;
    })
    .catch((err) => {
      report(err);
    });

  let searchKeyTemp = '';
  const search = () => {
    if (searchKey.value == searchKeyTemp) return;
    searchKeyTemp = searchKey.value;
    goodsRef.value.searchGoods(searchKey.value);
  };

  const goto = (url: string) => {
    uni.navigateTo({ url: url });
  };

  const gotoAd = (url: string) => {
    adShow.value = false;
    goto(url);
  };

  /* #ifdef MP-WEIXIN */
  uni.showShareMenu({
    menus: ['shareAppMessage', 'shareTimeline'],
    withShareTicket: true,
  });
  /* #endif */
</script>

<style lang="scss" scoped>
  .search-unit {
    position: fixed;
    // position: absolute;
    top: 88rpx;
    z-index: 1;

    .search-box {
      display: flex;
      width: 480rpx;
      margin-left: 35rpx;
      align-items: center;
      padding: 13rpx 25rpx 13rpx 20rpx;
      border-radius: 50rpx;
      border: 1px solid #adb6bb;
      backdrop-filter: blur(10px);
      background-color: rgba(0, 0, 0, 0.15);

      .search-input {
        width: 100%;
        font-size: 28rpx;
        // color: #d5dce0;
        color: #ffffff;
      }
    }

    .search-placeholder {
      color: #b4bec5;
    }
  }

  :deep(.u-indicator-item-round-active) {
    background-color: #125250 !important;
  }
</style>
